<template>
	<view class="return_logistics custom_form">
		<view class="custom_form_body">
			<view class="custom_form_body_item">
				<text><text>*</text>物流单号</text>
				<view class="custom_form_body_item_right">
					<u-input placeholder="请填写物流单号" inputAlign="right" v-model="fromValue.logisticCode" border="none"
						:clearable="true" placeholderClass="placeholderClass"></u-input>
					<image src="http://qianxueapplet.suoeryun.com/saoyisao.png" @click="handleScanCode"
						style="width: 48rpx !important;height: 48rpx !important;"></image>
				</view>
			</view>
			<view class="custom_form_body_item" @click="handleLogisticsCompany()">
				<text><text>*</text>物流公司</text>
				<view class="custom_form_body_item_right">
					<text v-if="fromValue?.shipperCode">{{fromValue?.shipperCodeText}}</text>
					<text v-else class="placeholder">请选择</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="custom_form_body_item">
				<text>联系电话</text>
				<u-input placeholder="请输入手机号码" inputAlign="right" v-model="fromValue.phone" border="none"
					:clearable="true" placeholderClass="placeholderClass" readonly=""></u-input>
			</view>
			<view class="custom_form_body_item no_border">
				<text style="width: 300rpx;">补充描述和凭证</text>
			</view>
			<u-textarea maxlength="200" count placeholder="有助于更好处理售后问题" border="none"
				v-model="fromValue.sendBackReplenish"></u-textarea>
			<view class="custom_form_body_upload">
				<template v-if="fromValue.sendBackImages">
					<view v-for="(item,index) in fromValue.sendBackImages" :key="index"
						@click.stop="handlePreview(index)">
						<text @click.stop="handleDelImg(index)">×</text>
						<image :src="item"></image>
					</view>
				</template>
				<view v-if="fromValue.sendBackImages?.length <= 5" @click="handleUpload">
					<image src="http://qianxueapplet.suoeryun.com/addimage.png">
					</image>
				</view>
			</view>
		</view>
		<view class="custom_form_btn" @click="handleSave">提交</view>
		<!--  物流公司选择-->
		<u-picker :show="isLogisticsCompany" :columns="columns" keyName="name" @confirm="handleSexConfirm"
			@cancel="handleSexCancel"></u-picker>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, getCurrentInstance, unref } from 'vue';
	import config from '@/common/config';
	import { onLoad } from '@dcloudio/uni-app';
	import { uploadOrderNumber } from '@/config/goodStuff.api';

	const fromValue = reactive({
		id: '',//id
		logisticCode: '',//快递单号
		shipperCode: '',//快递公司编码
		shipperCodeText: '',//快递公司描述
		phone: '',//	联系电话
		sendBackReplenish: '',//		寄回补充说明
		sendBackImages: [],//	寄回凭证
		consignee: '',//	收退货人名称
		phoneNumber: '',//	收退货人手机号码
		location: '',//	退货地区
		locationCode: '',//	退货地区code
		address: '',//		退货详情地址
		orderId: '',//		订单id
	})
	const { proxy } = getCurrentInstance();
	const isLogisticsCompany = ref(false);
	const params = ref();
	const columns = reactive([
		[{ shipperCode: 'STO', name: '申通快递' }, { shipperCode: 'YTO', name: '圆通快递' }, { shipperCode: 'HTKY', name: '百世快递' }]
	]);

	onLoad(options => {
		console.log(options);
		params.value = options;
		fromValue.orderId = options?.orderId;
		fromValue.id = options?.id;
		fromValue.consignee = options?.consignee;
		fromValue.phoneNumber = options?.phoneNumber;
		fromValue.location = options?.location;
		fromValue.locationCode = options?.locationCode;
		fromValue.address = options?.address;
		fromValue.phone = proxy['vuex_user']['phone'];
	})

	/**
	 * 扫码
	 */
	function handleScanCode() {
		uni.scanCode({
			success: function (res) {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
				fromValue.logisticCode = res.result;
			}
		});
	}

	/**
	 * 上传图片
	 */
	function handleUpload() {
		uni.chooseImage({
			count: 5 - fromValue.sendBackImages?.length,
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				console.log(tempFilePaths, 'tempFilePaths');
				uni.showLoading();
				let count = 0;
				tempFilePaths?.forEach(item => {
					uni.uploadFile({
						url: config.baseUrl + '/sys/common/obsUpload', //仅为示例，非真实的接口地址
						filePath: item,
						name: 'file',
						header: {
							'X-Access-Token': unref(proxy['vuex_token'])
						},
						success: (uploadFileRes) => {
							uni.hideLoading();
							fromValue.sendBackImages.push(JSON.parse(uploadFileRes.data)?.message);
						},
						fail() {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '接口异常！'
							})
						}
					});
				})
				setTimeout(_ => {
					if (count === tempFilePaths?.length) {
						uni.hideLoading();
					}
				}, 1000)
			},
			fail() {
				uni.hideLoading();
			}
		});
	}

	/**
	 * 打开物流公司
	 */
	function handleLogisticsCompany() {
		isLogisticsCompany.value = true;
	}

	/**
	 * 物流公司选择器 确认
	 */
	function handleSexConfirm(arr) {
		console.log(arr.value[0], 'arr');
		if (arr?.value?.length > 0) {
			fromValue.shipperCode = arr.value[0].shipperCode;
			fromValue.shipperCodeText = arr.value[0].name;
		}
		isLogisticsCompany.value = false;
	}

	/**
	 * 物流公司选择器 取消
	 */
	function handleSexCancel() {
		isLogisticsCompany.value = false;
	}

	/**
	 * 提交
	 */
	async function handleSave() {
		if (fromValue.logisticCode === '') {
			return uni.showToast({
				icon: 'none',
				title: '请输入快递单号'
			})
		}
		if (fromValue.shipperCode === '') {
			return uni.showToast({
				icon: 'none',
				title: '请选择快递公司'
			})
		}
		const res = await uploadOrderNumber({ ...fromValue, sendBackImages: fromValue?.sendBackImages?.join(',') });
		uni.showToast({
			icon: 'success',
			title: res,
			success() {
				uni.navigateBack({
					success() {
						uni.$emit('returnLogistics');
						uni.$emit('orderDetails')
					}
				})
			}
		})
	}


	/**
	 * 图片预览
	 */
	function handlePreview(index) {
		uni.previewImage({
			current: index,
			urls: fromValue.sendBackImages,
		})
	}

	/**
	 * 删除图片
	 */
	function handleDelImg(index) {
		fromValue.sendBackImages?.splice(index, 1);
	}
</script>

<style lang="scss" scoped>
</style>